<template>
	<div class="ordercard">
		<div v-if='radioData.length!=0'>
			<div  @click="choseRadio(key)" class="orderData2_radio flex align_center" v-for="(data,key) in radioData" :class="radioI==key?'orderData2_radioActive':''">
				<p class="orderData2_radio_P"></p>
				<div class="flex1 orderData2_radio_div">
					<div class="orderData2_radio_name">
						<span>{{data.bank}}</span>
						<span>{{data.bank_account}}</span>
						<span>{{data.cardholder}}</span>
					</div>
					<div class="orderData2_radio_card">{{data.card_num | carder}}</div>
					<div class="ordercard_icon" v-show="radioI==key">
						<i class="el-icon-edit-outline" @click='jump(data)'></i>
						<i class="el-icon-delete" @click="deleteCard(data)"></i>
					</div>
				</div>
			</div>
		</div>
		
		<div v-else style="font-size: 1.5rem;line-height: 5rem;text-align: center;">
			暂无账号
		</div>
		<el-button class="ordercard_button" @click='jump' v-if='radioData.length<2'>新增收款账户</el-button>
	</div>
</template>

<script>
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		filters: {
    		carder(val){
    			val=val.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
				return val;
    		}
    	},
		data: function() {
			return {
				yz:true,
				radioI:0,
				radioData:[],
//				radioData:[{
//					'name1':'中国联合银行',
//					'name2':'杭州朝晖支行',
//					'name3':'欧阳菲菲',
//					'card':'6222156161541420203'
//				},{
//					'name1':'中国联合银行',
//					'name2':'杭州朝晖支行',
//					'name3':'欧阳菲菲',
//					'card':'6222156161541420203'
//				},{
//					'name1':'中国联合银行',
//					'name2':'杭州朝晖支行',
//					'name3':'欧阳菲菲',
//					'card':'6222156161541420203'
//				}]
			}
		},
		mounted() {
			this.get_member_account();
		},
		methods: {
			get_member_account(){
				const loading=this.$loading({
		          lock: true,
		          text: '加载中',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.ajax(this, {
					'url': this.defines.get_member_account,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},

					'callback': data => {
						if(data.data.error_code==0) {
							this.radioData=data.data.data;
							loading.close();	

						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			jump(data){
				if(data){
					this.$router.push({
	        			path: '/wode/newCard',
	        			query:{
	        				'messageData':JSON.stringify(data),
	        			}
					})
				}
				else{
					this.$router.push({
	        			path: '/wode/newCard',
					})
				}
				
			},
			choseRadio(key){
				this.radioI=key
			},
			yzmyz(number){
				if(number==0){
					this.yz=true;
					return false;
					
				}
				number--;
				setTimeout(()=>{
					this.yzmyz(number)
				}, 1000);
			},
			deleteCard(msg){
				
				if(!this.yz){
					Toast('请不要频繁点击删除');
					return false
				}
				this.yz=false;
				this.ajax(this, {
					'url': this.defines.send_code,
					'type': 'post',
					'data':{
						'mobile':'15395794048'
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.yzmyz(60)
						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
				MessageBox.prompt('请输入手机验证码(验证码已发送)').then(({ value, action }) => {
				  this.ajax(this, {
						'url': this.defines.del_account,
						'type': 'post',
						'data':{
							'member_id':window.uid,
							'sms_code':value,
							'account_id':msg.id
						},
	
						'callback': data => {
							if(data.data.error_code==0) {
								this.radioData=data.data.data;
								loading.close();	
	
							} else {
								Toast(data.data.error_msg)
							}
	
						},
						'errorback': errory => {
	
						},
	
					})
				});
				
			},
		}
	}
</script>

<style scoped>
	.orderData2_radio_P{
		display: inline-block;
		width: 0.6rem;
		height: 0.6rem;
		border: 0.5rem solid #000;
		background: #fff;
		margin:0 1rem;
		border-radius:2rem ;
	}
	.orderData2_radio{
		width: 100%;
		margin: 2rem 0;
	}
	.orderData2_radio_div{
		border:0.1rem solid #000;
		border-radius: 0.4rem;
		padding: 1rem;
		margin-right: 2.5%;
		box-sizing: border-box;
		position: relative;
	}
	.orderData2_radio_name{
		width: 100%;
		
	}
	.orderData2_radio_name span{
		font-size: 1.3rem;
		display: inline-block;
		line-height: 1.5rem;
		margin-right: 1.5rem;
	}
	.orderData2_radio_card{
		font-size: 1.9rem;
		line-height: 2rem;
		margin-top: 0.7rem;
	}
	.orderData2_radioActive .orderData2_radio_P{
		background: #f7bd40;
	}
	.orderData2_radio_phone{
		height: 3rem;
		width: 96%;
		margin-top: 2rem;
		padding: 0 2%;
	}
	.orderData2_radio_phoneName{
		font-size: 1.6rem;
		margin:0 1rem;
	}
	.orderData2_radio_phone input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #e6e6e6;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.orderData2_radio_phoneCode{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
	.ordercard_icon{
		position: absolute;
		right: 1rem;
		bottom: 1rem;
	}
	.ordercard_icon i{
		font-size: 1.5rem;
		margin-left: 0.5rem;
	}
	.ordercard_button{
		width: 95%;
		background: #000;
		color: #f7bd40;
		padding: 1rem 0;
		text-align: center;
		position: fixed;
		left: 2.5%;
		bottom: 3%;
	}
</style>